// eslint-disable-next-line
import React, { useEffect, useState } from "react";
import type { ColumnsType } from "antd/es/table";
import { Switch, Input, Button, Space, Table, Tag } from "antd";
import axios from "axios";
import { FormOutlined, DeleteOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import CreateDate from "../../components/trainNumber/CreateDate";

const { Search } = Input;
interface DataType {
  key: string;
  trainType: number;
  username: string;
  seatNumber: number;
  carriageNum: number;
  Ridelimit: number;
  createTime: string;
  state: string;
}
type Props = {};

const TrainNumber = (props: Props) => {
  const nav = useNavigate();
  const dispatch = useDispatch();

  const [data, setData] = useState([]);
  // 获取数据;
  useEffect(() => {
    setData(trainData);
  }, []);
  let trainData = useSelector((state: any) => {
    console.log("车次数据", state.trainNumber.trainData);
    return state.trainNumber.trainData;
  });

  // 渲染
  const columns: ColumnsType<DataType> = [
    {
      title: "ID",
      dataIndex: "key",
      key: "key",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "车次/类型",
      dataIndex: "trainType",
      key: "trainType",
      render: (text: any) => (
        <p className="trainNumber">
          <a>G{text}</a>
          <span>高铁</span>
        </p>
      ),
      align: "center",
    },
    {
      title: "车长",
      dataIndex: "username",
      key: "username",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "总座位数",
      dataIndex: "seatNumber",
      key: "seatNumber",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "车厢数量",
      dataIndex: "carriageNum",
      key: "carriageNum",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "限制人数",
      dataIndex: "Ridelimit",
      key: "Ridelimit",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      // render: (text) => <a>{text}</a>,
      align: "center",
    },
    {
      title: "状态",
      dataIndex: "state",
      key: "state",
      align: "center",
      render: (text: any, record: any) => (
        <Switch defaultChecked={text} onChange={() => onChange(text, record)} />
      ),
    },
    {
      title: "Action",
      key: "Action",
      dataIndex: "state",
      render: (text: any, record: any) =>
        text ? (
          <Space size="middle">
            <a onClick={() => edit(record)}>
              <FormOutlined />
            </a>
            <a onClick={() => del(record, text)}>
              <DeleteOutlined />
            </a>
          </Space>
        ) : (
          {}
        ),
      align: "center",
    },
  ];

  // 开关选择器
  const onChange = (checked: boolean, record: any) => {
    console.log(`switch to ${!checked}`);
    let newData = [...data];
    newData.forEach((item: any, index) => {
      if (item.key == record.key) {
        item.state = !checked;
      }
    });
    setData(newData);
  };
  // 点击编辑
  const edit = (record: any) => {
    console.log(record);
  };
  // 点击删除;
  const del = (record: any, text: any) => {
    console.log("删除", record);
    let newData = [...data];
    let index = newData.findIndex((item: DataType) => item.key === record.key);
    console.log("删除下标", index);
    newData.splice(index, 1);
    setData(newData);
    console.log(text);
  };
  // 搜索
  const onSearch = (value: string) => {
    console.log(value);

    if (value) {
      let newData = [...data];
      let searchData = newData.filter((item: any) => item.trainType == value);
      setData(searchData);
    } else {
      axios.get("/api/trainNumber").then((res) => {
        if (res.status == 200) {
          setData(res.data);
        }
      });
    }
  };
  return (
    <div>
      <div className="action">
        <CreateDate></CreateDate>
        <Search
          placeholder="搜索ID/车次"
          onSearch={onSearch}
          style={{ width: 200 }}
        />
        <Button type="primary" onClick={() => nav("/index/trainNumber/add")}>
          新增+
        </Button>
      </div>
      <Table columns={columns} dataSource={data} />
    </div>
  );
};

export default TrainNumber;
